<template>
    <div>
        <div class="playerBox">
            <video class="mainPlayer" controls :src="timelineStore.TEMPURL" ref="videoDom"></video>
        </div>
        <div class="timeBox">
            <div>
                <n-button type="primary" size="tiny" @click="timelineStore.addLine">添加一个时间轴</n-button>
                <n-button type="primary" size="tiny" @click="maxTime = maxTime + 1">时间轴长度+1</n-button>
                <n-button type="primary" size="tiny" @click="timelineStore.createVideo">渲染</n-button>
            </div>
            <div class="timelineBox">
                <div class="line" :style="{ left: lineLeft + 10 + 'px' }"></div>
                <div class="timeStep">
                    <span v-for="(_, index) in new Array(maxTime)" @click="selectTime">{{ index }}</span>
                </div>
                <Timeline v-for="(line, index) in timelineStore.timeline" :max="maxTime" :index="index" :line="line">
                </Timeline>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, nextTick, Ref } from "vue"
import Timeline from "./timeline.vue"
import { useTimelineStore } from "../store/timeline.ts"
import { NButton } from 'naive-ui'
const timelineStore = useTimelineStore()
const maxTime = ref(15)
const lineLeft = ref(0)
const videoDom: Ref<HTMLVideoElement> = ref(({} as HTMLVideoElement))
function selectTime(e: MouseEvent) {
    if (!videoDom.value) return
    const clickPX = e.clientX - (document.body.getClientRects()[0].width * 0.2 + 10)
    lineLeft.value = clickPX
    videoDom.value.currentTime = clickPX / 100

}
nextTick(() => {
    videoDom.value.ontimeupdate = function () {
        lineLeft.value = (this as HTMLVideoElement).currentTime * 100
    }
})
document.onkeydown = function (e: KeyboardEvent) {
    // del键
    if (e.keyCode == 46) {
        timelineStore.deleteVideo()
    }
}

</script>
<style scoped>
.playerBox {
    height: 60%;
    display: flex;
    justify-content: center;
    background: var(--color-bg-3);
}

.timeBox {
    height: 40%;
    background: var(--color-bg-3);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: auto;
}

.mainPlayer {
    height: 100%;
    max-width: 100%;
    margin: auto;
}

.timelineBox {
    padding-left: 10px;
    position: relative;
}

.timelineBox .line {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 999;
    width: 1px;
    background-color: red;
}

.timeStep {
    color: white;
    font-size: 12px;
    display: flex;
    flex-wrap: nowrap;

}

.timeStep span {
    display: inline-block;
    width: 100px;
    border-left: 1px solid white;
    padding-left: 5px;
    flex-shrink: 0;
    box-sizing: border-box;
}
</style>